<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <title>进拜访前客户列表</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=4a6c1b54">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <script src="https://file.ggxqce.com/web/vue.min.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }

        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            outline: none;
        }

        body {
            background: #fff;
        }

        .tab {
            background: #fff;
            border-bottom: 1px solid #cbcbcd;
            line-height: 45px;
        }

        .tab span {
            padding-left: 4px;
            font-size: 14px;
        }

        .tabContent {
            display: flex;
            height: 45px;
            line-height: 45px;
            background: #2a8cec;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
        }

        .tabContentLeft {
            width: 25px;
        }

        .tabContentRight {
            width: 20px;
        }

        .tabContentMiddle {
            background: #2a8cec;
            flex: 1;
            overflow: hidden;
        }

        .tabActive {
            font-size: 14px;
            text-align: center;
            color: #2a8cec;
            background-image: url(/dist/img/tabApp.png);
            /* margin-left: 8px; */
            /* margin-right: 8px; */
            background-size: 100% 100%;
            /* padding: 10px 15px 15px; */
            float: left;
            height: 38px;
            line-height: 38px;
            margin-top: 9px;
            width: 33%;
        }

        .tabNo {
            text-align: center;
            font-size: 14px;
            color: #fff;
            /* margin-left: 8px; */
            /* margin-right: 8px; */
            background-size: 100% 100%;
            /* padding: 10px 15px 15px; */
            float: left;
            height: 38px;
            line-height: 38px;
            margin-top: 9px;
            width: 33%;
        }

        .btn-blue {
            border: none;
            background: #2a8ced;
            color: #fff;

            height: 30px;
            width: 14%;

            border-radius: 3px;
        }

        .btn-blue.focus, .btn-blue:focus, .btn-blue:hover {
            color: #fff;
            text-decoration: none;
        }

        .lineTwo span {
            max-height: 55px;
            line-height: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            text-align: left;
            padding: 5px;

        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .clear {
            clear: both
        }

        .listStyle {
            height: 36px;
            line-height: 36px;
            font-size: 12px;
            padding: 0 4px;
            border-bottom: 1px solid #ddd;
        }

        .listBox {
            border-top: 1px solid #ddd;
            padding-bottom: 60px;
            margin-top: 98px;
        }

        .tijiaoBtn {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: #2a8cec;
            color: #fff;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
        }

        .tabs {

        }

        .selectBox {
            position: fixed;
            top: 45px;
            left: 0;
            width: 100%;
            background: #fff;
            padding: 10px 0;
            height: 52px;
        }

        .noMore {
            color: #ddd;
            line-height: 40px;
            text-align: center;
        }

        .spanTitle {
            width: 25%;
            height: 30px;
            /*text-align: center;*/
            margin-left: 5px;
            line-height: 30px;
        }
    </style>
</head>
<body>
<section class="content" id="app" style="padding: 0px;" v-cloak>
    <div class="div-td-content-more"><i></i></div>
    <div class="tabContent">
        <div class="tabContentLeft"></div>
        <div class="tabContentMiddle">
             <span :class="selectIndex==0? 'tabActive':'tabNo'"
                   @click="selectIndex=0;get_list()">
                    {{todayTabName}}
                </span>
            <span id="cusBtn" :class="selectIndex==1? 'tabActive':'tabNo'"
                  @click="selectIndex=1;get_list()">
                    客户列表
                </span>
            <span :class="selectIndex==2?'tabActive':'tabNo'"
                  @click="selectIndex=2;get_list()">
                    意向客户
                </span>
        </div>
        <div class="tabContentRight"></div>
    </div>
    <div class="tabs" id="scrollDiv">
        <template v-if="selectIndex==0">
            <div class="selectBox">
                <div style="background: #f8f8f8;display: flex">
                    <span class="spanTitle" style="width: 20%">客户姓名</span>
                    <span class="spanTitle" style="width: 30%;text-align: center">手机号</span>
                    <span class="spanTitle" style="text-align: center">拜访时间</span>
                    <span class="spanTitle" style="text-align: center">拜访时长</span>
                </div>
            </div>
            <div class="listBox" style="margin-top: 89px;border-top:0">
                <div class="listStyle" v-for="(item,i) in todayList" @click="goVisiting(item)" @touchstart="touchin(item)" @touchend="cleartime(item)"
                     style="display: flex">
                    <span class="spanTitle" style="width: 20%" v-if="item.name.length >4">{{item.name.substring(0,4)}}</span>
                    <span class="spanTitle" style="width: 20%" v-else>{{item.name}}</span>
                    <span class="spanTitle" v-if="item.tel.length != 11" style="color:red;width: 30%;text-align: center">{{item.tel}}</span>
                    <span class="spanTitle" style="text-align: center" v-else>{{item.tel}}</span>
                    <span class="spanTitle" style="text-align: center">{{new Date(item.arrivalsTime).Format("hh:mm")}}/{{new Date(item.leaveTime).Format("hh:mm")}}</span>
                    <span class="spanTitle" style="text-align: center">{{item.time}}分钟</span>
                </div>
                <!--滚动加载需要当传回的数据小余30条时显示-->
                <div class="noMore" v-if="isMore">没有更多了~</div>
            </div>
        </template>
        <template v-if="selectIndex==1">
            <div class="selectBox">
                <input type="text" placeholder="请输入客户姓名或电话" class="form-control pull-left input-sm"
                       style="width:80%;height: 32px;vertical-align: top;border: 1px solid #cbcbcd;margin-right: 6px;padding-left: 4px;outline: none;margin-left: 4px;"
                       v-model="key" v-on:input="get_customerList(true)">
                <button type="button" class="btn btn-blue" @click="get_customerList()">查询</button>
            </div>
            <div class="listBox">
                <div class="listStyle" v-for="(item,i) in customerList" @click="goVisiting(item)">
                    <span style="margin-left: 3px;width: 50%;border-right: 0px;text-align: left;float:left;"
                          class="lineOne"><span>{{item.customerName}}</span></span>
                    <span v-if="item.customerTel.length != 11"
                          style="color: red;margin-right: 10px;width: 100px;border-left: 0px;text-align: right;float:right">{{item.customerTel}}</span>
                    <span v-else
                          style="margin-right: 10px;width: 100px;border-left: 0px;text-align: right;float:right">{{item.customerTel}}</span>
                    <span class="clear clearfix"></span>
                </div>
                <!--滚动加载需要当传回的数据小余30条时显示-->
                <div class="noMore" v-if="isMore">没有更多了~</div>
            </div>
        </template>
        <template v-if="selectIndex==2">
            <div class="selectBox">
                <input type="text" placeholder="请输入客户姓名或电话" class="form-control pull-left input-sm"
                       style="width:80%;height: 32px;vertical-align: top;border: 1px solid #cbcbcd;margin-right: 6px;padding-left: 4px;outline: none;margin-left: 4px;"
                       v-model="key" v-on:input="get_customerYxList(true)">
                <button type="button" class="btn btn-blue" @click="get_customerYxList()">查询</button>
            </div>
            <div class="listBox">
                <div class="listStyle" v-for="(item,i) in customerYxList" @click="goVisiting(item)">
                    <span style="margin-left: 3px;width: 50%;border-right: 0px;text-align: left;float:left;"
                          class="lineOne"><span>{{item.customerName}}</span></span>
                    <span v-if="item.customerTel.length != 11"
                          style="color:red;width: 100px;margin-right: 10px;border-left: 0px;text-align: right;float:right">{{item.customerTel}}</span>
                    <span v-else style="width: 100px;margin-right: 10px;border-left: 0px;text-align: right;float:right">{{item.customerTel}}</span>
                    <span class="clear clearfix"></span>
                </div>
                <!--非滚动加载需要 当回调函数成功时显示-->
                <div class="noMore" v-if="isMore">没有更多了~</div>
            </div>
        </template>
    </div>

    <div class="tijiaoBtn" @click="goVisiting()">新客户拜访</div>
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="/dist/plugins/scroll/myScroll.js"></script>
<!--框架已定义 JS-->
<!--oa自定义  JS-->
<script src="/dist/js/oaApp.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script>
    $(function () {
        $("body").on("click", ".lineOne,.lineTwo", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script>
    $.ajaxSetup({
        global: true,
        type: "POST",
        cache: false,
        dataType: "json",
        contentType: 'application/json;charset=utf-8',
        beforeSend: function () {
        },
        complete: function () {

        },
        error: function (e) {
            alert('error' + e.responseText);
        }
    });
    $.extend($.wyui, {
        page: {
            urlParams: null,
            queryParams: {
                requestPage: 1,
                pageSize: 30
            },
            dataUrl: '',
            createQueryParams: function () {
            },
            getByPage: function (type) {
                $.ajax({
                    url: $.wyui.page.dataUrl,
                    data: JSON.stringify($.wyui.page.queryParams),
                    beforeSend: function () {

                    },
                    complete: function () {
                    },
                    success: function (r) {
                        $.wyui.page.queryParams.requestPage++;

                        if (r.data.sendData.pager && r.data.sendData.pager.pageCount == 0) {
                            r.data.sendData.pager.pageCount = 1;
                        }
                        if (type == "scroll") {
                            $.wyui.page.getByPage_scroll_callback(r.data.sendData.records);
                        } else {
                            if ($.wyui.page.getByPage_callback_new) {
                                $.wyui.page.getByPage_callback_new(r.data.sendData.records);
                            }
                        }

                    }
                });
            }
        },
        postMethod: function (url, data, callback, sync, id) {
            if (!id) {
                id = "#app"
            }
            $.ajax({
                url: server.ip + url,
                async: sync ? false : true,
                data: JSON.stringify(data),
                beforeSend: function () {

                },
                complete: function () {
                    setTimeout(function () {
                    }, 1000);

                },
                success: function (r) {
                    if (!r.e.code) {
                        callback(r.data.sendData);
                    } else {
                        alert(r.e.desc);
                    }
                },
                error: function (e) {
                    alert(url + e.responseText);
                }
            });
        },
    });
</script>
<script type="text/javascript">
    //非滚动加载回调函数
    $.wyui.page.getByPage_callback_new = function (sendData) {
        app.customerList = sendData
        document.getElementById("scrollDiv").scrollTop = 0;
        var obj = {
            dialog: 'hidden'
        }
        prompt(JSON.stringify(obj))
    };
    //滚动加载回调函数
    $.wyui.page.getByPage_scroll_callback = function (list) {
        console.log(list)
        if (list.length < 30) {
            app.isMore = true;
            isLoad = false;
        } else {
            isLoad = true;
            // }
        }
        for (var i = 0; i < list.length; i++) {
            app.customerList.push(list[i]);
        }
        var obj = {
            dialog: 'hidden'
        }
        prompt(JSON.stringify(obj))
    }
    var app = new Vue({
        el: '#app',
        data: {
            userId: getUrlParamObj().userId,
            key: "",
            todayList: [],
            customerList: [],
            customerYxList: [],
            selectIndex: 0,
            visitType: getUrlParamObj().visitType,
            isMore: false,
            todayTabName: '今日客户',
            Loop:""

        },
        methods: {
            touchin: function (item) {
                console.log(item)
                var that=this;
                clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
                this.Loop = setTimeout(function() {
                    if (window.confirm("确认要删除该条数据("+item.name+")吗?")) {
                        $.ajax({
                            url: server.ip + "/wreportCusVisit/removeApp.json",
                            contentType: 'application/json;charset=utf-8',
                            type: "POST",
                            data: JSON.stringify({id:item.id}),
                            success: function (r) {
                                alert("删除成功！")
                                that.getTodayList()
                            },
                        });
                    } else {

                    }
                }.bind(this), 500);
            },
            cleartime: function (item) {
                // 这个方法主要是用来将每次手指移出之后将计时器清零
                clearInterval(this.Loop);
            },
            //获取客户列表
            get_list: function (type) {
                this.key = '';
                if (this.selectIndex == '1') {
                    this.get_customerList();
                } else if (this.selectIndex == '2') {
                    this.get_customerYxList();
                } else {
                    //今日客户
                    this.getTodayList()
                }
            },
            getTodayList: function (type) {
                //显示APP加载框
                if (!type) {
                    var obj = {
                        dialog: 'show'
                    }
                    prompt(JSON.stringify(obj))

                }
                //意向客户列表 直接加载
                var that = this;
                isLoad = false
                var data = {
                    "userId": that.userId,
                    "reportDate": new Date().Format("yyyy-MM-dd"),
                    "visitMode": that.visitType
                }
                $.ajax({
                    url: server.ip + "/wreportCusVisit/getCustomerListById.json",
                    contentType: 'application/json;charset=utf-8',
                    type: "POST",
                    data: JSON.stringify(data),
                    success: function (r) {
//                        var res = JSON.parse(r);
                        that.todayList = r.data.sendData;
                        var obj = {
                            dialog: 'hidden'
                        }
                        prompt(JSON.stringify(obj))
                    },
                });
            },
            get_customerYxList: function (type) {
                //显示APP加载框
                if (!type) {
                    var obj = {
                        dialog: 'show'
                    }
                    prompt(JSON.stringify(obj))

                }
                //意向客户列表 直接加载
                var that = this;
                $.wyui.postMethod(urlConfig.intentionCustomerManagement.getCustomerListByCreateUserId, {
                    "userId": that.userId,
                    "buyDate": '',
                    "key": that.key
                }, function (data) {
                    that.customerYxList = data.records;
                    that.isMore = true;
                    var obj = {
                        dialog: 'hidden'
                    }
                    prompt(JSON.stringify(obj))
                });
            },
            get_customerList: function (type) {
                //显示APP加载框
                if (!type) {
                    var obj = {
                        dialog: 'show'
                    }
                    prompt(JSON.stringify(obj))
                }

                //客户列表 分页加载
                $.wyui.page.dataUrl = server.ip + urlConfig.allCustomerReport.getCustomerListByRegionIds;
                $.wyui.page.queryParams.requestPage = 1;
                $.extend($.wyui.page.queryParams, {userIds: this.userId, key: this.key});
                $.wyui.page.getByPage();
            },
            //跳转APP拜访页面
            goVisiting: function (item) {
                var that = this;
                //带参数跳转
                var pageType = ''
                if (this.selectIndex == '1') {
                    pageType = 'customer'
                } else if (this.selectIndex == '2') {
                    pageType = 'yxCustomer'
                } else {
                    if (item) {
                        //查看客户
                        var obj = {
                            type: 'goDetailById',
                            id: item.id,
                            visitType: that.visitType,
                        }
                        prompt(JSON.stringify(obj))
                    } else {
                        //$('#cusBtn').click();
                        //新客户直接跳转
                        var obj = {
                            type: 'item',
                            visitType: that.visitType,
                            activity: 'closePage',
                            pageType: pageType,
                            item: ''
                        }
                        prompt(JSON.stringify(obj));
                    }

                    return
                }
                if (item) {
                    item.name=item.customerName;
                    item.tel=item.customerTel;
                    var obj = {
                        type: 'item',
                        visitType: that.visitType,
                        activity: 'closePage',
                        pageType: pageType,
                        item: JSON.stringify(item)
                    }
                    prompt(JSON.stringify(obj));
                } else {
                    //新客户直接跳转
                    var obj = {
                        type: 'item',
                        visitType: that.visitType,
                        activity: 'closePage',
                        pageType: pageType,
                        item: ''
                    }
                    prompt(JSON.stringify(obj));
                }
            },

        },
        mounted: function () {
            var that = this;
            //页面初次加载  执行客户分页列表
            that.getTodayList();
            if (this.visitType == '0') {
                that.todayTabName = "今日电访"
            } else if (this.visitType == '1') {
                that.todayTabName = "今日面访"
            } else {

            }

        }
    });

</script>
<script>
    /************************滚动加载******************************/
    var isLoad = true;
    $(window).scroll(function () {
        // scroll at bottom
//            console.log($(window).scrollTop() + $(window).height(), $(document).height())
        if ($(window).scrollTop() + $(window).height() + 20 > $(document).height()) {
            if (isLoad) {
                isLoad = false;
                if (app.selectIndex != 0) {
                    setTimeout($.wyui.page.getByPage("scroll"), 1000);
                }
            }
            // load data
        }
    });
</script>
</body>
